<template>
    <!-- <view>
首页
    <text class="iconfont icon-shoucang1"></text> // iconfont测试
</view> -->
    <view class="pyg_indx">
        <!-- 搜索框开始 -->
        <SearchInput></SearchInput>
        <!-- 搜索框结束 -->

        <!-- 轮播图开始 -->
        <view class="index_swiper">
            <!-- 
        1.swiper标签存在默认的宽度和高度 100% * 150px
        2.image也存在默认的宽度和高度  320px * 240px 
        3.设计图片和轮播图
            1.先看一下原图的宽高 750 * 340
            2.让图片的高度自适应 宽度等于100%
        4.图片标签
            mode属性 渲染模式
            widthFix 让图片的标签宽高和图片标签的内容的宽高都等比例的发生变化  
        -->
            <swiper :autoplay="true" interval="2000" :circular="true" :indicator-dots="true" indicator-color="#0094ff" indicator-active-color="pink" @change="test">
                <swiper-item v-for="(item, index) in swiperList" :key="item.goods_id">
                    <navigator :url="item.navigator_url">
                        <image mode="widthFix" :src="item.image_src" />
                    </navigator>
                </swiper-item>
            </swiper>
        </view>
        <!-- 轮播图结束 -->

        <!-- 导航开始 -->

        <!-- open-type 跳转的方式
    navigate 保留当前页面,跳转到应用内的某个页面,但是不能跳转到tabbar页面
    redirect 关闭当前页面,跳转到应用内的某个页面,但是不能跳转到tabbar页面
    switchTab 跳转到tabBar页面,并关闭其它所有非tabBar页面
    reLaunch 关闭所有页面,打开到应用内的某个页面 -->
        <view class="index_cates">
            <navigator url="/pages/category/index" open-type="switchTab" v-for="(item, index) in catesList" :key="item.name">
                <image mode="widthFix" :src="item.image_src" />
            </navigator>
        </view>
        <!-- 导航结束 -->

        <!-- 楼层开始 -->
        <view class="index_floor">
            <view class="floor_group" v-for="(item1, index1) in floorList" :key="item1.floor_title">
                <!-- 标题 -->

                <view class="floor_title">
                    <image mode="widthFix" :src="item1.floor_title.image_src" />
                </view>

                <!-- 内容 -->

                <view class="floor_content">
                    <navigator url="/pages/goods_list/index?query=服饰" v-for="(item2, index2) in item1.product_list" :key="item2.name">
                        <!-- <image mode="widthFix" src="{{ item2.image_src }}"></image> -->

                        <image :mode="index2 === 0 ? 'widthFix' : 'scaleToFill'" :src="item2.image_src"></image>
                    </navigator>
                </view>
            </view>
        </view>
        <!-- 楼层结束 -->
    </view>
</template>

<script>
import SearchInput from '../../components/SearchInput/SearchInput';
import { request } from '../../request/index.js'; //Page Object

export default {
    components: {
        SearchInput
    },
    //options(Object) 页面开始加载就会触发
    data() {
        return {
            swiperList: [],
            // 轮播图数据
            catesList: [],
            // 导航数据
            floorList: [] // 楼层数据
        };
    },
    onLoad: function (options) {
        // 1 发送异步请求获取轮播图数据
        // wx.request({
        //     url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
        //     data: {},
        //     header: {'content-type':'application/json'},
        //     method: 'GET',
        //     dataType: 'json',
        //     responseType: 'text',
        //     success: (result) => {
        //         console.log(result)
        //         this.setData({
        //             swiperList:result.data.message
        //         })
        //     },
        //     fail: () => {},
        //     complete: () => {}
        // });
        // request({url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'}).then(res => {
        //     console.log(res)
        //     this.setData({
        //         swiperList:res.data.message
        //     })
        // })
        // 同时发送请求，数据请求先后顺序不做要求，所以没必要用async await
        this.getSwiperList(); // 轮播图

        this.getCatesList(); // 导航

        this.getFloorList(); // 楼层
    },
    onReady: function () {},
    onShow: function () {},
    onHide: function () {},
    onUnload: function () {},
    onPullDownRefresh: function () {},
    onReachBottom: function () {},
    onShareAppMessage: function () {},
    onPageScroll: function () {},
    //item(index,pagePath,text)
    onTabItemTap: function (item) {},
    methods: {
        /**
         * 获取轮播图数据
         */
        getSwiperList() {
            request({
                url: '/home/swiperdata'
            }).then((res) => {
                // console.log(res)
                this.setData({
                    // swiperList:res.data.message
                    swiperList: res
                });
            });
        },

        /**
         * 获取分类导航数据
         */
        getCatesList() {
            request({
                url: '/home/catitems'
            }).then((res) => {
                // console.log(res)
                this.setData({
                    // catesList:res.data.message
                    catesList: res
                });
            });
        },

        /**
         * 获取楼层数据
         */
        getFloorList() {
            request({
                url: '/home/floordata'
            }).then((res) => {
                // console.log(res)
                this.setData({
                    // floorList:res.data.message
                    floorList: res
                });
            });
        },

        test(e) {
            // console.log(e)
        }
    }
};
</script>
<style>
@import './index.css';
</style>
